<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta name="format-detection" content="telephone=no"/>
		<title>访客登录</title>
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<!-- <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript" src="js/common.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.lvrubtn{
				width:100px;
				height:40px;
				background:#0062CC;
				color: #fff;
				margin: 30px auto;
				display: block;
			}
			.aname {
				font-size: 16px;
			}
			.ainf {
				font-size: 12px;
			}
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
			.buttonConcent{
				position: relative;
			}
			.inputBtn{
				position: absolute;
				width:100px;
				z-index:99;
				opacity: 0;
				left:38%;
			}
			.imgbox{
				/*padding:20px;*/
				margin: 0 auto;
				margin-bottom:30px;
				width:200px;
				height:200px;
				position: relative;
			}
			.imgbox2{
				width:200px;
				height:200px;
				overflow: hidden;
				border-radius: 50%;
				border: 2px solid #0062cc;	
				position: relative;
			}
			.imgbox img{				
				width:100%;
				height:200px;
				background-size: cover;	
			}
			.picture {
				display: block;
				width: 100%;
				height: auto;
			}
			    
			.face {
			    position: absolute;
			    border: 2px solid #FFF;
			}
			#message{
				width: 100%;
				text-align: center;
				color: #FF0000;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app" style="padding-top: 30px;">
			<div width="200px" class="imgbox" v-if="imgUrl"> 
				<div class="imgbox2">
					<img :src="imgUrl" width="225px" id="img" ref="imgs" /> 
				</div>
				<p id="message">{{ message }}</p>
			</div>
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>手机号</label>
			    	<input type="text" class="mui-input-clear" placeholder="请输入手机号">
			    </div>
			    <div class="mui-input-row">
			        <label>验证码</label>
			        <input type="text" class="mui-input-password" placeholder="请输入验证码">
			    </div>
			    <div class="mui-input-row" style="margin-top:0.35rem">
			        <label>姓名</label>
			    	<input type="text" class="mui-input-clear" placeholder="请输入姓名">
			    </div>
			    <div class="mui-input-row">
			        <label>被访人</label>
			        <input type="text" class="mui-input-password" placeholder="请输入被访人">
			    </div>
			    <!--<div class="mui-button-row">
			        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
			        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
			    </div>-->
			</form>
			<!--<div>{{foo}}</div>-->
			<div class="buttonConcent">
				<input class="inputBtn" type="file" name="video" id="uploadFile" accept="video#zs#" capture="user" v-on:change="inputOnchange" />
				<!--<input id='uploadFile' class="inputBtn" type="file" accept="image/*" capture="camera"  name="ipaddress" v-on:change="inputOnchange" >-->
				<button class="lvrubtn" style="margin-top:100px;">
					人脸录入
				</button>
				<button class="lvrubtn" >
					提交
				</button>
			</div>
			<!--<p style="font-size: 14px">附：

				<br>只允许调起摄像头，不允许选择文件
				
				<br>活体的视频大小不能超8Mb，时长不能超6秒
				<br><span id='info'></span>
			
			</p>
			<video id="video" width='300' height="300" controls autoplay></video>-->
			<!--video用于显示媒体设备的视频流，自动播放-->
			<!--<video id="video" autoplay style="width: 480px;height: 320px"></video>-->
			<!--拍照按钮-->
			<!--<div>
			<button id="capture">拍照</button>
			</div>-->
			<!--描绘video截图-->
			<!--<canvas id="canvas" width="480" height="320"></canvas>-->
			
			
			<!--<canvas ref='canvas'  width="500px" height="500px"></canvas>-->
			<!--<div>{{flie}}</div>-->
			<!--<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />-->
			<!--<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
			
			<button id="snap" onclick="takePhoto()">拍照</button>-->
		</div>
	</body>
	<script src="facedetection/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="facedetection/jquery.facedetection.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onresize = function() {
		    var deviceWidth = document.documentElement.clientWidth;
		    document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px';
		}
		const app = new Vue({
		  el: '#app',
		  data(){
		  	return {
		  	  foo: 'bar',
			  videoWidth:300,
			  videoHeight:300,
			  flie:'',
			  imgUrl:'',
			  message: ''
		  	}
		  	
		  },
		  created(){
		  },
		  watch:{
			  imgUrl(val){
				  if (val) {
				  	this.faceDetectionHaaa();
				  }
			  }
		  },
		  methods:{
		  	inputOnchange() {
			console.log(document.getElementsByClassName('face'))
		  		console.log(111,document.getElementsByClassName('face').length)
				if (document.getElementsByClassName('face').length == 1) {
					document.getElementsByClassName('face')[0].classList.remove("face");
				}
				let localFile = document.getElementById("uploadFile").files[0];
				// console.log(111,localFile)
				let reader = new FileReader();
                let url='';
                let that=this;
                reader.readAsDataURL(localFile);
                console.log(reader)
                reader.onloadend = function(event) {
                    url=this.result.substring(this.result.indexOf(',')+1);
        			// that.imgUrl='data:image/png;base64,'+url
					// console.log(that.imgUrl)
//					window.location.href='muiHtml.html?imgUrl=' + that.imgUrl;
//					that.pageHistroy()
					var UimageObj = new Image();
					UimageObj.crossOrigin ='anonymous'; // crossOrigin属性必须设置之前设置src.If颠倒，它不工作。 
					UimageObj.src = 'data:image/png;base64,'+url; 
					that.imgUrl = UimageObj.src;
					// that.faceDetectionHaaa();
                 }
//              FileReader.onloadend
//				var file = document.getElementById('uploadFile').files[0];
//				
//				var fileSize = (Math.round(file.size / 1024)).toFixed();
//				
//				document.getElementById('info').innerHTML += "所录视频大小约为：" + (fileSize / 1024).toFixed(2) + "Mb";
//				
//				
//				var url = URL.createObjectURL(file);
//				
//				console.log(url);
//				
//				document.getElementById("video").src = url;
			},
			faceDetectionHaaa() {
				console.log('bbb');
				  // DOM 更新了
				  app.$nextTick(() => {
					  $('#img').faceDetection({
					      complete: function (faces) { 
							
					  		console.log(faces, faces.length != 0)
							if(faces.length != 0) {
								$('#message').html('人脸识别正常');
								console.log('人脸识别正常');
							}else{
								$('#message').html('人脸识别失败');
								console.log('人脸识别失败');
							}
					      },
					      error:function (code, message) {
					          console.log('Error: ' + message);
					      }
					  });
				  });
				  
				
			},
			//判断是历史返回还是正常打开
			pageHistroy(e){
			    var a=e||window.event;			   
			    if(a.persisted){			
			        window.location.href='muiHtml.html?imgUrl=' + this.imgUrl;
			    }
			}
		  }
		});
	</script>	

</html>
<!--<script type="text/javascript">
	//访问用户媒体设备的兼容方法
	function getUserMedia(constrains,success,error){
	    if(navigator.mediaDevices.getUserMedia){
	        //最新标准API
	        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
	    } else if (navigator.webkitGetUserMedia){
	        //webkit内核浏览器
	        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
	    } else if (navigator.mozGetUserMedia){
	        //Firefox浏览器
	        navagator.mozGetUserMedia(constrains).then(success).catch(error);
	    } else if (navigator.getUserMedia){
	        //旧版API
	        navigator.getUserMedia(constrains).then(success).catch(error);
	    }
	}
	
	var video = document.getElementById("video");
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	
	//成功的回调函数
	function success(stream){
	    //兼容webkit内核浏览器
	    var CompatibleURL = window.URL || window.webkitURL;
	    //将视频流设置为video元素的源
	    video.src = CompatibleURL.createObjectURL(stream);
	    //播放视频
	    video.play();
	}
	
	//异常的回调函数
	function error(error){
	    console.log("访问用户媒体设备失败：",error.name,error.message);
	}
	if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
	    //调用用户媒体设备，访问摄像头
	    getUserMedia({
	        video:{width:480,height:320}
	    },success,error);
	} else {
	    alert("你的浏览器不支持访问用户媒体设备");
	}
	
	//注册拍照按钮的单击事件
	document.getElementById("capture").addEventListener("click",function(){
	    //绘制画面
	    context.drawImage(video,0,0,480,320);
	});
</script>-->

